<template>
  <div class="input-email input-box">
    <div class="input-att" >Email</div>

    <div class="input" >
      <input type="email" name="email" :value="value" @input="input"
          @keyup.stop="choseKuangKeyUp"
          @blur="removeAll"
      >
    </div>
              
    <!-- 动画选择框 -->
    <transition name="will-chose-email">
      <div class="will-chose-email-box"  @click="choseWillEmail"  v-show="willChoseEmailBoxShow">
        <div class="will-chose-email-item" v-for="email of willChoseEmailArr" :key="email" >{{email}}</div>
      </div>
    </transition>
    <!-- 动画选择框 -->
  </div>
</template>

<script>
  import {
    EMAIL_VERTIFY
  } from '__CONFIG__/base-config.js'
  export default {
    name: 'InputEmail',
    props: ['value', 'minlength'],
    data: () => ({
      willChoseEmailBoxShow: false,
      willChoseEmailArr: []
    }),
    methods: {
      input(e) {
        this.$emit('input', e.target.value)
      },
      // 点击 选择框
      choseWillEmail(e) {
        const item = e.target
        const targetEmail = item.innerHTML
        if(targetEmail) {
          //更新数据
          this.$emit('input', targetEmail)
          this.willChoseEmailBoxShow = false //关闭选择框
        }
      },
      //choseKuangKeyUp 选择框的确定键
      choseKuangKeyUp(e) {
        const keyCode = e.keyCode
        //其实在函数已经做过判断
        if(keyCode === 13 && this.willChoseEmailBoxShow) {//按下回车键
          const mineEvent = {
            target: {
              innerHTML: this.willChoseEmailArr[0]
            }
          }
          this.choseWillEmail(mineEvent)
        }
      },
      //blur当不在fouces时
      removeAll() {
        this.willChoseEmailBoxShow = false
      }
    },
    watch: {
      ['value']: function (newValue, oldValue) {
        const email = newValue
        const minlength = this.minlength || 4
        if (email.length < minlength) {
          this.willChoseEmailBoxShow = false //先打开选择框
          if (this.willChoseEmailArr.length) this.willChoseEmailArr = []
          return null
        }
        const $index = email.indexOf('@') //获取匹配开始位置
        const emailSplitArr = email.split('@')
        const preffix = emailSplitArr[0]
        const subffix = emailSplitArr[1]
        let willChoseEmailArr = [] //默认的替换数组
        if ($index != -1 && subffix) { //开启匹配模式
          willChoseEmailArr = EMAIL_VERTIFY.filter((item) => {
            const index = item.indexOf('@' + subffix)
            return  index !== -1 && item !== '@' + subffix
          }).map((emailSuffix) => {
            return preffix + emailSuffix
          })
        } else {
          willChoseEmailArr = EMAIL_VERTIFY.map((emailSuffix) => {
            return preffix + emailSuffix
          })
        }
        if (willChoseEmailArr.length) {
          this.willChoseEmailBoxShow = true //先打开选择框
        }
        //直接添加在尾部
        this.willChoseEmailArr = willChoseEmailArr
        //获取到结果
      }
    },
  }
</script>

<style lang="less">
  @import url('./input_email.less');
</style>